<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>胖胖狗 舵机标定</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        a{
          display: block;width: 100%;height: 100%;line-height: 100px;font-size: 14px;text-align: center;text-decoration:none;color:#000000;
        }
        .content{
            width: 200px;height: 200px;position: relative;margin:50px auto;left: 0;top:50%;bottom: 0;right:0;
            box-shadow: 0px 0px 550px rgba(255, 255, 255, 0.3) inset,0px 0px 5px #FFFFFF;
        }
        .quartercircle{
            position:absolute;width: 100px;height: 100px;-webkit-border-radius: 100px 0 0 0;
        }
        .divLeft{
            top: 25%;left: -10%; transform:rotate(-45deg);background-color: bisque ;
        }
        .divTop{
            top: -10%;left: 25%; transform:rotate(45deg);background-color: burlywood ;
        }
        .divRight{
            top: 25%;left: 60%;transform:rotate(135deg);background-color: darkgray ;
        }
        .divBottom{
            top: 60%;left: 25%;transform:rotate(-135deg);background-color: darkkhaki ;
        }
        .circle{
          width:50%;height:50%;position: absolute;z-index: 100;top:0%;left:0%;bottom:0;right: 0;margin:auto;border-radius: 100%;background-color: #889900;text-align: center;
        }
        .circle span{
            display: block;width: 100%;height: 100%;line-height: 200px;font-size: 24px;
        }
        .quartercircle a{
            position: absolute;width: 100%;height: 100%;
            background: #888888;
        }
        .quartercircle a:hover{
            background: #8BFF7C;
        }
        #alertBox {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            z-index: 1000;
        }

    </style>

<body>
<center><h1>胖胖狗 舵机标定</h1></center>
<div class="content" style="">
    <form action="/" method="get" accept-charset="utf-8"> 
    <div class="quartercircle divLeft" style="">
      <a href="javascript:void(0);" onclick="loadData('?key=l1', this)" id="?key=l1"  style="background: no-repeat center;transform:rotate(45deg);" >腿 1</a>
    </div>
    <div class="quartercircle divTop" style="">
        <a href="javascript:void(0);" onclick="loadData('?key=l2', this)" id="?key=l2" style="background: no-repeat center;transform:rotate(-45deg);">腿 2</a>
    </div>
    <div class="quartercircle divRight" style="">
        <a href="javascript:void(0);" onclick="loadData('?key=l3', this)" id="?key=l3" style="background: no-repeat center;transform:rotate(-135deg);">腿 3</a>
    </div>
    <div class="quartercircle divBottom" style="">
        <a href="javascript:void(0);"  onclick="loadData('?key=l4', this)" id="?key=l4" style="display:block;position:absolute;z-index:50;background: no-repeat center;transform:rotate(135deg);">腿 4</a>
    </div>
    <div class="circle" style="background-color: red;"><a href="?key=sc">保存并退出</a></div>
  </form>
</div>
<div class="content" style="">
    <form action="/" method="get" accept-charset="utf-8"> 
    <div class="quartercircle divLeft" style="">
      <a href="javascript:void(0);" onclick="loadData('?key=sd', this)" style="background: no-repeat center;transform:rotate(45deg);">小腿-</a>
    </div>
    <div class="quartercircle divTop" style="">
        <a href="javascript:void(0);" onclick="loadData('?key=hi', this)" style="background: no-repeat center;transform:rotate(-45deg);">大腿+</a>
    </div>
    <div class="quartercircle divRight" style="">
        <a href="javascript:void(0);" onclick="loadData('?key=si', this)" style="background: no-repeat center;transform:rotate(-135deg);">小腿+</a>
    </div>
    <div class="quartercircle divBottom" style="">
        <a href="javascript:void(0);" onclick="loadData('?key=hd', this)" style="display:block;position:absolute;z-index:50;background: no-repeat center;transform:rotate(135deg);">大腿-</a>
    </div>
    <div class="circle" id="startGather" style="background-color: red;"><a href="javascript:void(0);" onclick="loadData('?key=t9')">开始标定</a></div>
  </form>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<center>
    <div style="padding-top: 50px;">
        <button  onclick="loadData('?key=ju')" style="width:90px; height:30px; background-color: lightblue;"> 肩部 + </button>
        <button onclick="loadData('?key=jd')" style="width:90px; height:30px; background-color: lightblue;"> 肩部 - </button>
    </div>
</center>
        
</div>
<br />
<br />
<br />
<br />
<div id="alertBox">保存成功</div>

<script>

    window.onload = function() {
        loadData('?key=l1');
    }

    var isStart = false;
    var isFristLoad = true;

   function loadData(urlParam,obj) {
       if(urlParam == '?key=t9')
       {
            document.getElementById("startGather").style.backgroundColor = "green";
            isStart = true;
       }

       



       console.log(isFristLoad + "   " + isStart);
       if(isFristLoad || (!isFristLoad && isStart))
       {

            if(urlParam == '?key=l1' || urlParam == '?key=l2' || urlParam == '?key=l3' || urlParam == '?key=l4')
            {
                document.getElementById("?key=l1").style.color = "black";
                document.getElementById("?key=l2").style.color = "black";
                document.getElementById("?key=l3").style.color = "black";
                document.getElementById("?key=l4").style.color = "black";
                document.getElementById("?key=l1").style.fontSize = "12px";
                document.getElementById("?key=l2").style.fontSize = "12px";
                document.getElementById("?key=l3").style.fontSize = "12px";
                document.getElementById("?key=l4").style.fontSize = "12px";
                document.getElementById("?key=l1").style.fontWeight = "";
                document.getElementById("?key=l2").style.fontWeight = "";
                document.getElementById("?key=l3").style.fontWeight = "";
                document.getElementById("?key=l4").style.fontWeight = "";
                if  (urlParam == '?key=l1')
                {
                    document.getElementById("?key=l1").style.color = "green";
                    document.getElementById("?key=l1").style.fontSize = "19px";
                    document.getElementById("?key=l1").style.fontWeight = "blod";
                }
                else if(urlParam == '?key=l2')
                {
                    document.getElementById("?key=l2").style.color = "green";
                    document.getElementById("?key=l2").style.fontSize = "19px";
                    document.getElementById("?key=l2").style.fontWeight = "blod";
                }
                else if(urlParam == '?key=l3')
                {
                    document.getElementById("?key=l3").style.color = "green"; 
                    document.getElementById("?key=l3").style.fontSize = "19px";
                    document.getElementById("?key=l3").style.fontWeight = "blod";
                }   
                else if(urlParam == '?key=l4')
                {
                    document.getElementById("?key=l4").style.color = "green"; 
                    document.getElementById("?key=l4").style.fontSize = "19px";
                    document.getElementById("?key=l4").style.fontWeight = "blod";
                }  
            }

            isFristLoad = false;
            var domain = window.location.hostname;
            var baseUrl = "http://" + domain + "/";
            var xhr = new XMLHttpRequest();
            xhr.open('GET', baseUrl + urlParam, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    innerData(xhr.responseText);
                }
            };
            xhr.send();
            return;
       }

       
   }

   function innerData(responseText){
        var resultData = JSON.parse(responseText);
        var pos = resultData["pos"];
        var cfg = resultData["cfg"];
        var htmlContent = '<center>'
            +'<table border="3">' 
                + '<tr>' 
                    + '<th bgcolor="' + pos[0] + '">1号大腿：' +pos[1]+ '<Br/>1号小腿：' +pos[2]+ '<Br/>1号肩部：' +pos[3]+ '</th>' 
                    + '<th bgcolor="' + pos[4] + '">2号大腿：' + pos[5] + '<Br/>2号小腿：' + pos[6] + '<Br/>2号肩部：' + pos[7] + '</th>'
                + '</tr>'
                + '<tr>' 
                    + '<th bgcolor="' + pos[8] + '">1号大腿：' +pos[9]+ '<Br/>1号小腿：' +pos[10]+ '<Br/>1号肩部：' +pos[11]+ '</th>' 
                    + '<th bgcolor="' + pos[12] + '">2号大腿：' + pos[13] + '<Br/>2号小腿：' + pos[14] + '<Br/>2号肩部：' + pos[15] + '</th>'
                + '</tr>'
            + '</table></center><Br/><Br/>'
            + '<center>'
            //+ '<form action="/" method="get" accept-charset="utf-8">'
            + '<table border="3">'
            + '<tr><th>大腿(杆1)长</th><th><input type="text"  style="width:100px; height:30px;" name="l1" value=' + cfg[0] + '></th></tr>'
            + '<tr><th>小腿(杆2)长</th><th><input type="text"  style="width:100px; height:30px;" name="l2" value=' + cfg[1] + '></th></tr>'
            + '<tr><th>肩部(杆3)长</th><th><input type="text"  style="width:100px; height:30px;" name="l3" value=' + cfg[2] + '></th></tr>'
            + '<tr><th>机器人长度</th><th><input type="text"  style="width:100px; height:30px;" name="l" value=' + cfg[3] + '></th></tr>'
            + '<tr><th>机器人宽度</th><th><input type="text"  style="width:100px; height:30px;" name="b" value=' + cfg[4] + '></th></tr>'
            + '<tr><th>机器人腿间距</th><th><input type="text"  style="width:100px; height:30px;" name="w" value=' + cfg[5] + '></th></tr>'
            + '<tr><th>TROT步态步频</th><th><input type="text"  style="width:100px; height:30px;" name="speed" value=' + cfg[6] + '></th></tr>'
            + '<tr><th>TROT抬腿高度</th><th><input type="text"  style="width:100px; height:30px;" name="h" value=' + cfg[7] + '></th></tr>'
            + '<tr><th>TROT前进重心调整P</th><th><input type="text"  style="width:100px; height:30px;" name="trot_cg_f" value=' + cfg[8] + '></th></tr>'
            + '<tr><th>TROT后退重心调整P</th><th><input type="text"  style="width:100px; height:30px;" name="trot_cg_b" value=' + cfg[9] + '></th></tr>'
            + '<tr><th>TROT转向重心调整P</th><th><input type="text"  style="width:100px; height:30px;" name="trot_cg_t" value=' + cfg[10] + '></th></tr>'
            + '<tr><th>高度调节P环</th><th><input type="text"  style="width:100px; height:30px;" name="Kp_H" value=' + cfg[11] + '></th></tr>'
            + '<tr><th>姿态调节P环</th><th><input type="text"  style="width:100px; height:30px;" name="Kp_G" value=' + cfg[12] + '></th></tr>'
            + '<tr><th>小跑坡面适应P环</th><th><input type="text"  style="width:100px; height:30px;" name="Kp_TW" value=' + cfg[13] + '></th></tr>'
            + '<tr><th colspan="2"><input type="Submit" style="width:100px; height:30px;" value="更改控制器参数"  onclick="subData()" /></th></tr>'
            + '</table>'
            //+ '</form>'
            +'</center>';
        document.getElementById("dataBody").innerHTML = htmlContent;
   }

   function subData(){
        //http://127.0.0.1/?l1=70&l2=79&l3=27&l=210&b=83&w=135&speed=0.065&h=40&trot_cg_f=-1&trot_cg_b=0.5&trot_cg_t=0&Kp_H=0.06&Kp_G=0.06&Kp_TW=1.5
        var paramData = {
            "l1": document.getElementsByName("l1")[0].value,
            "l2": document.getElementsByName("l2")[0].value,
            "l3": document.getElementsByName("l3")[0].value,
            "l": document.getElementsByName("l")[0].value,
            "b": document.getElementsByName("b")[0].value,
            "w": document.getElementsByName("w")[0].value,
            "speed": document.getElementsByName("speed")[0].value,
            "h": document.getElementsByName("h")[0].value,
            "trot_cg_f": document.getElementsByName("trot_cg_f")[0].value,
            "trot_cg_b": document.getElementsByName("trot_cg_b")[0].value,
            "trot_cg_t": document.getElementsByName("trot_cg_t")[0].value,
            "Kp_H": document.getElementsByName("Kp_H")[0].value,
            "Kp_G": document.getElementsByName("Kp_G")[0].value,
            "Kp_TW": document.getElementsByName("Kp_TW")[0].value
        };

        var domain = window.location.hostname;
        var baseUrl = "http://" + domain;
        simulateGetRequest(baseUrl, paramData);

        return;
   }

   function simulateGetRequest(url, params) {
        // 创建新的XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 构建查询字符串
        var queryString = Object.keys(params).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join('&');
        // 如果URL中已有查询参数，则追加到URL上
        if (url.indexOf('?') > -1) {
            url += '&' + queryString;
        } else {
            url += '?' + queryString;
        }
    
        // 配置请求
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 请求成功，处理返回的数据
                console.log(xhr.responseText);
                showAlert();
            } else if (xhr.status !== 200) {
                // 请求失败
                console.error('Request failed with status:', xhr.status);
            }
        };
        // 发送请求
        xhr.send();
    }
 
    function showAlert() {
        var alertBox = document.getElementById('alertBox');
        alertBox.style.display = 'block';
        setTimeout(function() {
          alertBox.style.display = 'none';
        }, 3000); // 三秒后消失
    }

</script>

<div id="dataBody">
</div>











